<!-- 搜索城市页 -->
<template>
  <view class="screen-width" :class="isShow ? 'active' : ''">
    <view class="search_bar screen-width">
      <van-search
        style="height: 100%; font-size: 40rpx"
        v-model="cityName"
        show-action
        shape="round"
        background="#225996"
        placeholder="请输入城市名称"
        autofocus
        @input="getCityList"
      >
        <template #action>
          <div @click="onSearch" style="color: #fff; font-size: 30rpx">取消</div>
        </template>
      </van-search>
      <ul class="list">
        <li v-for="(item, index) in cityList" :key="index" @tap="selectCity(item.name)">
          <p v-html="item.name"></p>
        </li>
        <!-- <li
          v-for="(item, index) in 15"
          style="overflow: hidden"
          :key="index"
        ></li>-->
      </ul>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cityList: [], // 城市列表
      cityName: "", // 城市名称
      isShow: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSearch() {
      uni.navigateTo({
        url: "/pages/index/selectLocation"
      });
    },
    getCityList() {
      if (this.cityName) {
        let obj = {
          city: this.cityName
        };
        this.$get(
          "/bmj-api/api/pms/pmsPolicyNotice/getPolicyNoticeCityAll",
          obj
        ).then(res => {
          // console.log(res);
          if (res.code == 200) {
            let { result } = res;

            let arr = [];
            result.forEach(e => {
              arr.push(e.values);
            });
            let newArr = [...arr];

            this.cityList = newArr.flatMap(item => {
              return item;
            });
            this.$changeText(this.cityList, "name", this.cityName);

            // this.$matcheHTML();
          }
        });
      } else {
        this.cityList = [];
      }
    },
    selectCity(v) {
      v = this.$matcheHTML(v);
      this.$get(
        "/bmj-api/api/pms/pmsPolicyNotice/getPolicyNoticeAreaInfo"
      ).then(res => {
        if (res.code == 200) {
          let ii = "";
          let { result } = res;
          let arr = result.map(el => el.values).flat();
          //   console.log(arr);
          arr.forEach((e, index) => {
            let i = e.child.findIndex(el => el.name == v);
            if (i > -1) {
              ii = index;
              return;
            }
          });
          uni.setStorageSync("province", arr[ii].name); // 省份
          uni.setStorageSync("city", v); // 城市
          uni.switchTab({
            url: "/pages/index/index"
          });
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.getCityList();
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.search_bar {
  height: 120rpx;
  background-color: #007aff;
}
.list {
  padding: 0 30rpx;
  li {
    height: 80rpx;
    line-height: 80rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #ccc;
  }
}
</style>
